﻿<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>demo</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script> 
			var timestamp = parseInt(Date.parse(new Date())/10000);
			document.write('<link rel="stylesheet" href="css/style.css?v='+timestamp+'"/>');
		</script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="js/swiper.animate.min.js" ></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<!-- 个人文件 -->
		<link rel="stylesheet" href="css/config.css">
		<link rel="stylesheet" type="text/css" href="css/zhy.animate.css"/>
		<style>
		#container { 
			width: 100%; 
			height: 100%;
		}
		</style>
		<script src="js/eruda.js"></script> <script >eruda.init();</script>
		 
		<script>
			window.onload = function(){
				var test = window.location.protocol;
				if(test == "https"){
					Window.location.href = 'http://127.0.0.1/nav/index.html'
				}
				console.log(test,"http");
			} 
			// let consoleScript = document.createElement("script");
			// consoleScript.src = "http://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js";
			// consoleScript.onload = function () {
			// new VConsole()
			// }
			// document.head.appendChild(consoleScript);

		</script>
	</head>
	<body>
		<div class="main pos-ab">
			<!-- 屏保 -->
			<div class="loading_div pos-ab" onclick="gettime()">
				<img src="img/pb_bg.png" class="full pos-ab" alt="">
				<span style="color: #063683;width: 100%;text-align: center;display: block;position: absolute;top: 40%;">屏保启动了</span>
			</div>
			<!-- page1 -->
			<div class="page1 pos-ab none">
				<img src="img/page1/bg.png" class="full pos-ab" alt="">
				<img src="img/page1/btn1.png" class="btn1 nav_btn pos-ab" alt="" ontouchstart="playChildClick(1,'page1')" >
				<img src="img/page1/btn2.png" class="btn2 nav_btn pos-ab" alt="" ontouchstart= "playChildClick(2,'page1')" >
				<img src="img/page1/btn3.png" class="btn3 nav_btn pos-ab" alt="" ontouchstart="playChildClick(3,'page1')" >
				<img src="img/page1/btn4.png" class="btn4 nav_btn pos-ab" alt="" ontouchstart="playChildClick(4,'page1')">
			</div>
			<!-- page2 -->
			<div class="page2 pos-ab">
				<img src="img/page2/bg.png" class="full pos-ab" alt="">
				<div class="control_div1 pos-ab">
					<img src="img/page2/kuang1.png" class="kuan1 pos-ab" alt="">
					<img src="img/page2/btn_stay.png" class="btn_stay pos-ab fun_btn1" alt="" onclick="playChildClick(1,'page2')" ontouchstart="playChildClick(1,'page2')">
					
					<!-- swiper -->
					<div class="swiper2">
						<div class="swiper-wrapper">
							<div class="swiper-slide slide s1" data-index="1" data-id="1" data-slide="2">
								<img src="img/a_play1.png" class="slide sc1 sd pos-ab"  alt="" srcset="">
								影片1
							</div>
							<div class="swiper-slide slide s2" data-index="2" data-id="2"  data-slide="2">
								<img src="img/a_play1.png" class="slide sc2 sd pos-ab"  alt="" srcset="">
								
								影片2</div>
							<div class="swiper-slide slide s3" data-index="3" data-id="3"  data-slide="2">
								<img src="img/a_play1.png" class="slide sc3 sd pos-ab"  alt="" srcset="">
								
								
								影片3</div>
									
						</div>
					</div>
					<!-- 如果需要导航按钮 -->
					<!-- <div class="swiper-button-prev prev2"></div>
					<div class="swiper-button-next next2"></div> -->
					<div class="page2_btn_video pos-ab">
						<img src="img/page2/btn1.png" class="play_btn  fun_btn2" ontouchstart="playChildClick(2,'page2')" alt="" >
						<img src="img/page2/btn2.png" class="pause_btn fun_btn3" ontouchstart="playChildClick(3,'page2')" alt="">
						<img src="img/page2/btn3.png" class="vlo_up_btn fun_btn4" ontouchstart="playChildClick(4,'page2')" alt="">
						<img src="img/page2/btn4.png" class="vlo_down_btn fun_btn5" ontouchstart="playChildClick(5,'page2')" alt="">

					</div>
					<!-- 进度条 -->
					<!-- <div class="jindu_div pos-ab ">
						<div class="jiazai pos-ab">
							<div class="jd_click_content pos-ab">
								<div class="jd_content pos-ab">
									<img src="img/page2/jdnr.png" alt="" class="loo pos-ab">
								</div>
							</div>
						</div>
					</div> -->
				</div>
				<div class="control_div2 pos-ab">
					<img src="img/page2/kuang2.png" class="kuan1 pos-ab" alt="">
					<img src="img/page2/btn_stay.png" class="btn_stay pos-ab fun_btn6" ontouchstart="playChildClick(6,'page2')" alt="">
					<!-- swiper -->
					<div class="swiper3">
						<div class="swiper-wrapper">
							<div class="swiper-slide slide s4" data-index="4" data-slide="3" data-id="1" >
								
								影片1
								<img src="img/a_play1.png" class="slide sc4 sd pos-ab"  alt="" srcset="">
							</div>
							<div class="swiper-slide slide s5" data-index="5" data-slide="3" data-id="2">
								
								<img src="img/a_play1.png" class="slide sc5 sd pos-ab"  alt="" srcset="">
								影片2</div>
							<div class="swiper-slide slide s6" data-index="6" data-slide="3" data-id="3">
								
								<img src="img/a_play1.png" class="slide sc6 sd pos-ab"  alt="" srcset="">
								
								影片3</div>
							<div class="reconnect_button">
								<span class="button_class"></span>
							</div>
						</div>
					</div>
					<!-- 如果需要导航按钮 -->
					<!-- <div class="swiper-button-prev prev3"></div>
					<div class="swiper-button-next next3"></div> -->
					<div class="page2_btn_video pos-ab">
						<img src="img/page2/btn1.png" class="play_btn  fun_btn7" ontouchstart="playChildClick(7,'page2')" alt="">
						<img src="img/page2/btn2.png" class="pause_btn fun_btn8" ontouchstart="playChildClick(8,'page2')" alt="">
						<img src="img/page2/btn3.png" class="vlo_up_btn fun_btn9" ontouchstart="playChildClick(9,'page2')" alt="">
						<img src="img/page2/btn4.png" class="vlo_down_btn fun_btn10" ontouchstart="playChildClick(10,'page2')" alt="">

					</div>
				</div>
				<div class="control_div3 pos-ab">
					<img src="img/page2/kuang3.png" class="kuan1 pos-ab" alt="">
					<img src="img/page2/btn_stay.png" class="btn_stay pos-ab fun_btn11" ontouchstart="playChildClick(11,'page2')"  alt="">
					<!-- swiper -->
					<div class="swiper4">
						<div class="swiper-wrapper">
							<div class="swiper-slide slide s7" data-index="7" data-slide="4" data-id="1">
								影片1

								<img src="img/a_play1.png" class="slide sc7 sd pos-ab"  alt="" srcset="">
							</div>
							<div class="swiper-slide slide s8" data-index="8" data-slide="4" data-id="2">影片2


								<img src="img/a_play1.png" class="slide sc8 sd pos-ab"  alt="" srcset="">
							</div>
							<div class="swiper-slide slide s9" data-index="9" data-slide="4" data-id="3">影片3
								<img src="img/a_play1.png" class="slide sc9 sd pos-ab"  alt="" srcset="">


							</div>
							<div class="swiper-slide slide s10" data-index="10" data-slide="4" data-id="4">影片4

								<img src="img/a_play1.png" class="slide sc10 sd pos-ab"  alt="" srcset="">


							</div>
						</div>
					</div>
					<!-- 如果需要导航按钮 -->
					<!-- <div class="swiper-button-prev prev4"></div>
					<div class="swiper-button-next next4"></div> -->
					<div class="page2_btn_video pos-ab">
						<img src="img/page2/btn1.png" class="play_btn  fun_btn12" ontouchstart="playChildClick(12,'page2')" alt="">
						<img src="img/page2/btn2.png" class="pause_btn fun_btn13" ontouchstart="playChildClick(13,'page2')" alt="">
						<img src="img/page2/btn3.png" class="vlo_up_btn fun_btn14" ontouchstart="playChildClick(14,'page2')" alt="">
						<img src="img/page2/btn4.png" class="vlo_down_btn fun_btn15" ontouchstart="playChildClick(15,'page2')" alt="">
					</div>
				</div>
				<div class="control_div4 pos-ab">
					<img src="img/page2/kuang4.png" class="kuan1 pos-ab" alt="">
					<div class="page2_btn_div pos-ab">
						<img src="img/page2/btn5.png" class="fun_btn16 c_btn2" ontouchstart="playChildClick(16,'page2')" alt="">
						<img src="img/page2/btn6.png" class="fun_btn17 c_btn2" ontouchstart="playChildClick(17,'page2')" alt="">
					</div>
				</div>
				<div class="control_div5 pos-ab">
					<img src="img/page2/kuang5.png" class="kuan1 pos-ab" alt="">
					<div class="page2_btn_div pos-ab">
						<img src="img/page2/btn5.png" class="fun_btn18 c_btn2" ontouchstart="playChildClick(18,'page2')" alt="">
						<img src="img/page2/btn6.png" class="fun_btn19 c_btn2" ontouchstart="playChildClick(19,'page2')" alt="">
					</div>
				</div>
				<div class="control_div6 pos-ab">
					<img src="img/page2/kuang6.png" class="kuan1 pos-ab" alt="">
					<div class="page2_btn_div pos-ab">
						<img src="img/page2/btn5.png" class="fun_btn20 c_btn2" ontouchstart="playChildClick(20,'page2')" alt="">
						<img src="img/page2/btn6.png" class="fun_btn21 c_btn2" ontouchstart="playChildClick(21,'page2')" alt="">
					</div>
				</div>
				<img src="img/page2/btn15.png" class="back_btn fun_btn22 pos-ab" ontouchstart="playChildClick(22,'page2')" alt="">
				<div class="guanji_div pos-ab" id="clickBtn">

				</div>
			</div>


			
			<!-- 重连模式 -->
			<div class="reconnect_div pos-ab">
				<div class="reconnect_button">
					<span class="button_class"></span>
				</div>
				
			</div>
			<span class="reconnect_text none">断线重连中....</span>
		</div>

		<script src="js/picker.min.js?v=2.21" type="text/javascript"></script>
		<script src="js/preloadjs-0.6.1.min.js"></script>
		<script src="js/wx_author.js"></script>  
		<script>
			document.write('<script src="templete/app.js?v='+timestamp+'"><\/script>');
			document.write('<script src="js/loading.js?v='+timestamp+'"><\/script>');
		</script>
		<script>
			var localUrl = 'ws://192.168.0.18:1222';
			// var localUrl = 'ws://192.168.0.66:1222';
			console.log(localUrl,"+localUrl");
			window.onload = function(){
				setData();
				setEvent();	
			}
			
			// class socketConnect_{
			// 	#ip
			// 	#port
			// 	#ws
			// 	#connectStatus

			// 	constructor(ip,port) {
			// 		this.#ip = ip
			// 		this.#port = port
			// 		// this.ws_open()
			// 		console.log(this.#ip,"this.#ip",this.#port);
					
			// 	}
			// 	//
			// 	is_online(){
			// 		return this.#connectStatus
			// 	}

			// 	ws_open(){
			// 		let connectStatus = false
			// 		// 客户端与服务器进行连接
			// 		this.#ws = new WebSocket('ws://' + this.#ip+':'+this.#port); 
			// 		// 连接成功回调
			// 		this.#ws.onopen = e => {
			// 			console.log('连接成功111111111111111', e) 
			// 			this.#connectStatus = true
			// 		}
			// 		this.#ws.onclose = function (e) { // 连接断开 
			// 			console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
			// 			console.log(e)

			// 			// 重连方法
			// 		}

				
			// 	}

			// 	send_message(type,num,elseStr,vlo_type = ""){

			// 	}

				
			// }
			// const socketConnect_1 = new socketConnect_("192.168.0.18","1222");
			// socketConnect_1.ws_open()



			class WhrWebSocket {
    constructor(params) {
    	//只有params这个参数必须卸载constructor方法里，其他的实例属性可以写在外面
    	// 比如 socket = null
        this.socket = null
        this.params = params
        this.j = 0 //websocket重连次数
        this.i = 0//发送信息次数
        if ('WebSocket' in window) {
            this.init(params)
        } else {
            Message({
                message: "浏览器不支持，请换浏览器再试",
                type: "error"
            });
        }
    }

    init(params) {
        console.log("init方法开始")
        if (params.path) {
            this.path = params.path
        } else {
            throw new Error('参数socket服务器地址path必须存在')
        }

        this.socket = new WebSocket(this.path)

        this.socket.onopen = () => {
            
            console.log("连接开启")
        }
        this.socket.onclose = () => {
            this.j = 0
            console.log("连接关闭")
            this.reconnect()
        }
        this.socket.onerror = () => {
            this.j = 0
            console.log("连接错误")
            
        }
       
        this.socket.onmessage = params.onmessage || this.getMessage


    }

    getMessage(msg) {
        console.log("收到的消息", msg)
        return msg
    }

    send(data) {
        let s = null
        try {
            if (this.socket.readyState == 1) {
                this.i = 0
                clearTimeout(s)
                this.socket.send(data)
                console.log("发送成功" + data)
            } else {
                if (this.i <= 10) {
                    console.log(this.socket.readyState)
                    ++this.i
                    // this.send(data)
                    s = setTimeout(() => {
                        this.send(data)
                    }, 100 * this.i)
                } else {
                    this.i = 0
                    clearTimeout(s)
                }
            }
        } catch (e) {
            console.log(e)

        }
    }
	close() {
        clearTimeout(this.time)
        this.socket.close(1000, '手动关闭')
        console.log("调用关闭")
    }
    reconnect() {
        this.j++
        //1.开始重连
        //2.如果连接不成功要继续重连
        if(this.j>1){
            return;
        }else {
            if (this.socket.readyState == 1 || this.socket.readyState == 0) {
                // this.lock = false
                // clearTimeout(s)
                return false
            } else {
                console.log('开始重连')
                this.time = setTimeout(() => {
                    this.init(this.params)
                }, 5000)
            }
        }
    }
}

const socket = new WhrWebSocket({
        path: 'ws://192.168.0.18:1222',
        onmessage: function (msg) {
          console.log(msg)                 
      }
	})
				
	socket.send('#####AT+STACH8=0')
	socket.send('#####AT+STACH8=1')
	socket.send('1321654131321')
			// swiper_init()		
		    //发送格式{"type":"msg","message":"1"}
		    function socketConnect(url) {
				// 客户端与服务器进行连接
				ws = new WebSocket(url); // 返回`WebSocket`对象，赋值给变量ws
				// console.log(ws,"wswswswsws");
				
				// 连接成功回调
				ws.onopen = e => {
					// console.log('连接成功', e)
					connectStatus = true;
					// sendSocket('volumeChange',volume); //发送音量
					sendSocket_str('num',volume); 
					
					// sendMessage = setInterval(() => {
					// 	if(isMessage == false && connectStatus == true){
					// 		reconnectFail()
					// 		$(".reconnect_text").show();
					// 		$(".reconnect_text").text("未启动视频,自动重连中...")
					// 		$(".reconnect_div").removeClass("disabledbutton")
					// 		sendSocket('testStart',0) // 客户端与服务器端通信
					// 	}
					// }, 1000);
		      }
			ws.onclose = function (e) { // 连接断开 
				console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
				console.log(e)
				// 重连
				reconnect();
			}
			ws.onmessage = e => { // 监听服务器端返回的信息
				// do something
				if(e.data == "ok"){
					console.log('服务器端返回：', e.data)
					//..
					isMessage = true;
					reconnect_status_style('success');
					clearInterval(sendMessage)
				}else{
					// console.log(data)
					try {
						let data = JSON.parse(e.data);
						console.log(data,"data");
						messageReturnFalse(data) //服务端返回继续重连
					}catch(err) {
					//错误消息
				}
			}
		}
			return ws; // 返回websocket对象
		}


		function sendSocket_str(type,num,elseStr) {
			//发送字符串
			let str = ''
			if(type == "str"){
				str = num
			}
			else if(type == "num"){
				str = num
			}
			// console.log(str,'返回str');
			if(connectStatus == true)
			{
				wsValue.send(str)
			}
			return 	str
		}



		// function sendSocket(type,num,elseStr) {
		// 	var object = {};
		// 	object.type = type;
		// 	object.num = num;
		// 	object.elseStr = elseStr;
		// 	// console.log(object,"obj");
		// 	if(type == "play"){
		// 		// videoBtnShow("btnShow",num);
		// 		$(".nav3").removeClass('disabledbutton')
		// 		$(".nav3").attr("src","img/nav3_h.png")
		// 	}
		// 	else if(type == "pause"){
		// 		// 0是暂停 1是播放
		// 		$(".nav3").attr("src","img/nav3.png")
		// 	}
		// 	else if(type == "show"){
		// 		// videoBtnShow("show",num);
		// 		$(".nav3").addClass('disabledbutton')
				
		// 	}
		// 	else if(type == "volumeChange"){
		// 		object.elseStr = volume;
		// 		console.log(object.elseStr,"volumeChange");
		// 	}
		// 	object = JSON.stringify(object);
		// 	if(connectStatus == true)
		// 	{
		// 		wsValue.send(object)
		// 	}	
		// }

		/**
		 * 重连
		 * */
		function reconnect() {
			connectStatus = false;
			isMessage = false;
			if (lockReconnect) return;
			lockReconnect = true;
			setTimeout(() => {
				if(connectStatus == false){
					console.log(localUrl,"localUrl");
					wsValue = socketConnect(localUrl);
					lockReconnect = false;
					reconnect_status_style('failed')
				}
			}, 3000);
		}
		</script>
	</body>
</html>